<template>
    <div class="bg-light">
      <!-- 头部 -->
      <div class="header d-flex align-items-center">
        <router-link :to="`/notification`" class="text-dark">
          <i class="bi bi-chevron-left fs-4"></i>
        </router-link>
        <h5 class="mb-0 mx-auto">周测英语</h5>
        <button class="btn btn-outline-secondary" @click="submitAnswers">提交答卷</button>
      </div>

      <div class="exam-list">
        <router-link
            v-for="exam in updatedExamList"
            :key="exam.path"
            :to="exam.path"
            class="text-decoration-none text-dark"
        >
          <div class="exam-item">
            <span>{{ exam.title }}</span>
            <div class="d-flex align-items-center">
              <i class="bi bi-chevron-right"></i>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </template>
  
  <script>
  import http from "@/router/http";
  import {paperTypeDict, moduleTypeDict} from "@/router/dict"
  import router from "@/router";
  export default {
    name: 'EnglishExamView',
    data() {
      return {
        noticeId:null,
        examPaperId:null,
        userAnswers: [],
        timeSpent: 0,
        examList: [
          { title: '阅读 Text1', path: '/english/weekTest/reading-text' ,text: 1},
          { title: '阅读 Text2', path: '/english/weekTest/reading-text' ,text: 2},
          { title: '阅读 Text3', path: '/english/weekTest/reading-text' ,text: 3},
          { title: '阅读 Text4', path: '/english/weekTest/reading-text' ,text: 4},
          { title: '翻译', path: '/english/weekTest/translation' },
          { title: '完形填空', path: '/english/weekTest/cloze' },
          { title: '新题型', path: '/english/weekTest/new-type' },
          { title: '小作文', path: '/english/weekTest/small-writing' },
          { title: '大作文', path: '/english/weekTest/large-writing' }
        ]
      }
    },
    computed: {
      // 计算属性，根据selectedYear和examList中的相关数据动态生成带年份参数的路径
      updatedExamList() {
        return this.examList.map(exam => {
          if (exam.path && exam.path.includes('reading-text')) {
            return {
              ...exam,
              path: `/english/weekTest/reading-text?text=${exam.text}&examPaperId=${this.examPaperId}`
            };
          }
          return exam;
        });
      }
    },
    mounted() {
      const storedTime = localStorage.getItem('englishExamTime');
      if (!storedTime) {
        this.startTime = new Date();
        localStorage.setItem('englishExamTime',this.startTime.getTime());
      }
      // this.noticeId = this.$route.params.noticeId;
      this.examPaperId = this.$route.query.examPaperId;
      this.fetchDataFromBackend();
    },
    methods: {
      async fetchDataFromBackend() {
        this.examList = [
          { title: '阅读 Text1', path: '/english/weekTest/reading-text' ,text: 1},
          { title: '阅读 Text2', path: '/english/weekTest/reading-text' ,text: 2},
          { title: '阅读 Text3', path: '/english/weekTest/reading-text' ,text: 3},
          { title: '阅读 Text4', path: '/english/weekTest/reading-text' ,text: 4},
          { title: '翻译', path: '/english/weekTest/translation' },
          { title: '完形填空', path: '/english/weekTest/cloze' },
          { title: '新题型', path: '/english/weekTest/new-type'},
          { title: '小作文', path: '/english/weekTest/small-writing' },
          { title: '大作文', path: '/english/weekTest/large-writing' }];
        try {
          const params = {
            examPaperId: this.examPaperId,
            subjectName: 'english',
          }
          const response = await http.get('/student/question/getQuestionListForEnglish', { params: params });
          const data = response.data;
          if (!data || !data.response) {
            console.error('获取阅读数据失败:', data.message);
            this.isLoading = false;
            return;
          }
          const ydlj = moduleTypeDict.find(item => item.code === 'ydlj').name;
          const wxtk = moduleTypeDict.find(item => item.code === 'wxtk').name;
          if (data && data.code === 1 && data.response) {
            this.examList = [];
            const responseData = data.response;
            let ydljName = [];
            let otherName = [];
            for (const type in responseData) {
              const typeData = responseData[type];
              for (const item of typeData) {
                if(item.name.includes(ydlj)){
                  ydljName.push(item.name);
                }else{
                  otherName.push(item.name)
                }
              }
            }
            let i = 1;
            for (const name of ydljName) {
              const path = `/english/weekTest/reading-text?text=${i}`;
              const exam = {
                title: "阅读" + " Text"+i,
                path: path,
                text: i
              };
              this.examList.push(exam);
              i++;
            }
            for (const name of otherName) {
              let path = null;
              let lastStudied = false;
              if(name.includes('翻译')){
                 path = `/english/weekTest/translation?noticeId=${this.noticeId}&examPaperId=${this.examPaperId}`;
              }else if(name.includes(wxtk)){
                  path = `/english/weekTest/cloze?noticeId=${this.noticeId}&examPaperId=${this.examPaperId}`;
              }else if(name.includes('小作文')){
                  path = `/english/weekTest/small-writing?noticeId=${this.noticeId}&examPaperId=${this.examPaperId}`;
              }else if(name.includes('大作文')){
                  path = `/english/weekTest/large-writing?noticeId=${this.noticeId}&examPaperId=${this.examPaperId}`;
              }else if(name.includes('七选五')){
                  path = `/english/weekTest/new-type?noticeId=${this.noticeId}&examPaperId=${this.examPaperId}`;
              } else{
                  path = null;
              }
              const exam = {
                title: name,
                path: path,
                lastStudied: lastStudied
              };
              this.examList.push(exam);
            }
          }
        } catch (error) {
          console.error('获取后端数据失败:', error);
        }
      },
      async submitAnswers() {
        this.endTime = new Date();
        let timeSpent = 0;
        if(localStorage.getItem('englishExamTime')){
          timeSpent = this.endTime - new Date(parseInt(localStorage.getItem('englishExamTime')));
        }
        localStorage.removeItem('englishExamTime');
        const response = await http.post('/student/answer/calcutateEnglishScore?examPaperId='+this.examPaperId+'&timeSpent='+timeSpent+'&userAnswers='+JSON.stringify(this.userAnswers));
        const data = response.data;
        if (!data) {
          console.error('提交答卷失败:', data.message);
          return;
        }
        console.log('提交答卷成功:');
        alert('提交答卷成功');
        // router.push('/notification/'+this.noticeId);
      }
    },

  }
  </script>
  
  <style scoped>
  body {
    background-color: #f0f9f9;
  }
  
  .header {
    padding: 15px;
    background: white;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .year-scroll {
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px;
    margin: 10px 0;
  }
  
  .year-scroll span {
    display: inline-block;
    padding: 5px 15px;
    margin-right: 15px;
    font-size: 1.1rem;
    cursor: pointer;
  }
  
  .year-scroll .active {
    color: #40e0d0;
    border-bottom: 2px solid #40e0d0;
  }
  
  .exam-list {
    padding: 15px;
  }
  
  .exam-item {
    background: white;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
  }
  
  .exam-item i {
    color: #40e0d0;
  }
  </style> 